<!doctype html>
<html>
<head>
    <title>dHydra : Dashboard</title>
    <meta charset="utf-8"/>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/Semantic-UI/semantic.min.css" rel="stylesheet">
    <link href="../../../../dHydra/static/css/Semantic-UI/semantic.min.css" rel="stylesheet">
    <link href="/static/css/font-awesome.min.css" rel="stylesheet">

    <script src="/static/js/jquery-3.0.0.min.js"></script>
    <script src="/static/js/semantic.min.js"></script>
    <script src="/static/js/vue.min.js"></script>

    <script src="../../../dHydra/static/js/jquery-3.0.0.min.js"></script>
    <script src="../../../dHydra/static/js/semantic.min.js"></script>
    <script src="../../../dHydra/static/js/vue.min.js"></script>
    <script src="../../../dHydra/static/js/tablesort.js"></script>

    <script src="/static/js/tablesort.js"></script>
    <script src="/static/js/Monitor/workers.js?v=8"></script>
</head>
<body>
<style>
.fa-padding{
    padding-right: 5px
}
</style>

<div class="ui container" style = "padding-top: 20px; padding-bottom: 10px" id="workers_overview">
    <h1 class="ui header" style = "color: rgba(100,100,100,1); font-size: 50px">Workers Monitor</h1>
    <div class="ui grid">
        <div class="twelve wide column">
            <div class="ui horizontal divider">Worker Watch List</div>
            <!-- 监控的Worker -->
            <div class="ui grid">
                <div class="eleven wide column">
                    <a class="ui label" v-for="workerName in workers.workersWatchList">
                      {! workerName !}
                      <i class="delete icon remove-worker" worker-name="{! workerName !}"></i>
                    </a>
                </div>
                <div class="five wide column">
                    <select class="ui search mini dropdown" id="opt-worker-name">
                        <option value="">Choose worker</option>
                        <option value="{! workerName !}" v-for="workerName in workers.workerNames">{! workerName !}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="four wide column">
            <div class="ui horizontal divider">Operation</div>
            <button class="ui mini basic green button">Start</button>
        </div>
    </div>


    <div class="ui horizontal divider">Worker Instances</div>
    <div class="ui dropdown" id="worker-filter">
        <i class="filter icon"></i>
        <span class="text">Filter</span>
        <div class="menu">
          <div class="ui icon search input">
            <i class="search icon"></i>
            <input type="text" placeholder="Search tags...">
          </div>
          <div class="divider"></div>
          <div class="header">
            <i class="tags icon"></i>
            Tag Label
          </div>
          <div class="scrolling menu">
            <div class="item">
            <div class="ui red empty circular label"></div>
            Terminated
            </div>
            <div class="item">
            <div class="ui blue empty circular label"></div>
            WatchList
            </div>
            <div class="item">
            <div class="ui green empty circular label"></div>
            Active
            </div>
          </div>
        </div>
    </div>
    <div class="ui container" v-for="workerName in workers.workersWatchList">
    <div class="ui dividing"></div>
    <h4 class="ui header"><a href="/Worker/{!workerName!}/index">{!workerName!} : </a></h4>
    <div v-if="!(workerLength()[workerName]>0)">
        No Instance
    </div>

    <table class="ui sortable celled table" v-if="(workerLength()[workerName]>0)">
      <thead>
        <tr>
          <th rowspan="1" class="center aligned collapsing">PID</th>
          <th rowspan="1" class="center aligned">Nickname</th>
          <th rowspan="1" class="center aligned">Description</th>
          <th rowspan="1" class="center aligned collapsing">Status</th>
          <th class="center aligned collapsing">Operation</th>
        </tr>
      </thead>
      <tbody class="center aligned">
        <tr v-for="(name, workerInfo) in workers.workersInfo[workerName]">
          <td class="collapsing">{! workerInfo.pid !}</td>
          <td class="collapsing">
              <a href="/Worker/{! workerName !}/{! workerInfo.nickname!}">{! workerInfo.nickname!}</a>
          </td>
          <td>{! workerInfo.description!}</td>
          <td class="collapsing" v-bind:class="{ positive: workerInfo.status=='started', negative: workerInfo.status=='terminated' }">
            {! workerInfo.status !}
          </td>
          <td class="collapsing">
              <button class="ui mini button" v-if="workerInfo.status=='started'">Stop</button>
          <button class="ui mini button" v-if="workerInfo.status=='terminated'">Start</button></td>
        </tr>
      </tbody>
    </table>
    </div>
</div>

<script>
$(function(){
    // $('#multi-select').dropdown({
    //     onChange: function(value, text, $selectedItem) {
    //         // custom action
    //         console.log(value);
    //         console.log(text);
    //         console.log($selectedItem);
    //     }
    // });
    $('#opt-worker-name').dropdown({
        onChange: function(value, text, $selectedItem) {
            // custom action
            workers.addToWatchList(value);
        }
    });
    $('#worker-filter').dropdown();
    $('table').tablesort();
    $('.ui.accordion').accordion();
    $('.demo.menu .item').tab();
    Vue.config.delimiters = ['{!', '!}'];

    var onWatchListChanged = function(){
        console.log("onWatchListChanged triggered");
        console.log(workers.workersWatchList);
        Vue.nextTick(function(){
            $(".remove-worker").off("click");
            $(".remove-worker").on("click",function(){
                workerName = $(this).attr("worker-name");
                var workersWatchList = new Set(workers.workersWatchList);
                workersWatchList.delete(workerName);
                workers.workersWatchList = Array.from(workersWatchList);
            });
        });
    };

    var workers = new Workers();
    workers.getAllWorkers();
    workers.getWorkersInfoFromRedis();
    workers.onWatchListChanged = onWatchListChanged;
    var vm_workers = new Vue({
        el: "#workers_overview",
        data: {
            workers: workers
        },
        methods: {
            workerLength: function(){
                result = new Object();
                for (var workerName in workers.workersInfo) {
                    result[workerName] = Object.keys(workers.workersInfo[workerName]).length;
                };
                return result;
            }
        }
    });

});
</script>
</body>
</html>
